<template>
    <div class="mainsss" :class="{open:isshow}">
        <van-nav-bar  title="离线消息设置"   left-arrow  @click-left="msgBoxGoBack"/>
        <V-loading :isshow="isloading"></V-loading>
        <div class="content">
            <van-notice-bar :scrollable="false">
                Tip:客服不在线时，收到客户消息的主动回复
            </van-notice-bar>
            <p class="title">回复文字：</p>
            <textarea v-model="text" class="text"></textarea>
            <p class="title">回复图片：</p>
            <van-uploader :after-read="uploadPic" :disabled="isuploadimg">
                <slot>
                    <div class="imgbox">
                        <van-icon class="icon" name="photograph" v-if="imgUrl == ''"/>
                        <img preview="3" v-else :src="imgUrl">
                    </div>
                </slot>
            </van-uploader>
            <van-button @click="postTiJiao" class="tjbtn" size="large" type="primary">保存</van-button>
            <van-button @click="setMsg = true" class="tjbtn" size="large">设置超时自动回复</van-button>
        </div>
        <van-popup v-model="setMsg" class="addmsg">
            <p class="title">设置超时时间</p>
            <van-cell-group>
                <van-field v-model="timeOutMsg.timeout" label="时间(秒)" />
                  <van-field @click.native="timeOutMsg.isinure = !timeOutMsg.isinure" disabled center clearable label="是否启用" >
                     <!-- <van-button slot="button" size="small" type="primary">发送验证码</van-button> -->
                     <van-switch @click.native="timeOutMsg.isinure = !timeOutMsg.isinure" slot="button" v-model="timeOutMsg.isinure" />
                  </van-field>
            </van-cell-group>
            <van-button @click="sendSetMsg" :loading="setMsgLoad" class="button" size="large" type="primary">保存</van-button>
        </van-popup>
    </div>
</template>
<script>
    import Vloading from './Vloading';
  export default {
      data:function(){
          return {
              setMsg:false,
              setMsgLoad:false,
              linkss:this.audiopath,
              isuploadimg:false,
              imgUrl:'',
              uploadimgpath:'',
              imgFile:'',
              oldUrl:'',
              text:'',
              isloading:false,
              timeOutMsg:{}

          }
      },
      components: {
           'V-loading': Vloading
      },
      props: ['isshow'],
      watch:{
          isshow:function(){
              var that = this;
              $.get($vm.Index.URL.server+'/api/Customer_service/getReply/id/'+$vm.Index.cs_user.id,function(res){
                  if(typeof res == 'string') res = JSON.parse(res); 
                  if(res.status == 1){
                      that.imgUrl = $vm.Index.URL.server + res.result.auto_reply_img;
                      that.oldUrl = res.result.auto_reply_img;
                      that.text = res.result.auto_reply_text;
                      
                  }
              });
          },
          setMsg:function(){//打开设置超时回复的对话框触发
            console.log(111);
                var that = this;
                if(that.setMsg){
                    $.post(that.URL.node+'/getTimeout',{
                        cs_id:$vm.Index.cs_user.id
                    },function(res){
                        var obj = {
                            timeout:10000,
                            isinure:false
                        }
                        if(res.status == 1){
                            obj = res.arr;
                        }
                        obj.timeout = parseInt(obj.timeout) / 1000;
                        that.timeOutMsg = obj;
                    });
                }
          }
      },
      updated () {
          this.$previewRefresh()
      },
      methods:{
          uploadPic:function(data){
              console.log(data);
              this.imgFile = data.file;
              this.imgUrl = this.$fn.getObjectURL(this.$fn.convertBase64ToBlob(data.content))
              return;
          },
          msgBoxGoBack:function(){
               this.$router.back(-1);
          },
          postTiJiao:function(){
            var that = this;
            new Promise(function(resolve, reject) {
                that.isloading = true;
                if(that.imgFile == ''){
                    resolve('');
                    return;
                }
                var fd = new FormData();
                fd.append("image", that.imgFile);
                console.log(that.imgFile);
                $.ajax({
                    url: $vm.Index.URL.server+'/api/Chatupload/UnifiedUpload',
                    type: 'POST',
                    cache: false,
                    data: fd,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    beforeSend: function (res) {
                        
                    },
                    success: function (res) {
                        if(typeof res == 'string') res = JSON.parse(res); 
                        if(res.error == 0){
                            resolve(res.url);
                        }else{
                            that.isloading = false;
                            reject('上传图片出错')
                        }
                    }
                });
            }).then(function(url){
                that.uploadimgpath = url;
                var data = {
                    id:$vm.Index.cs_user.id,
                    auto_reply_text:that.text,
                }
                if(url != ''){
                    data.auto_reply_img = that.uploadimgpath;
                }else{
                    data.auto_reply_img = that.oldUrl;
                }
                $.post($vm.Index.URL.server+'/api/Customer_service/saveReply',data,function(res){
                    if(typeof res == 'string') res = JSON.parse(res);
                    that.isloading = false; 
                    if(res.status == 1){
                        that.$toast('修改成功');
                        
                    }else{
                        that.$toast('修改失败，刷新页面重试');
                    }
                });
            }).catch(function(str){
                that.$toast(str);
            });
          },
          sendSetMsg:function(){
              var that = this;
              that.setMsgLoad = true;
              var obj = that.timeOutMsg;
              obj.timeout = parseInt(parseFloat(obj.timeout) * 1000);
              obj.cs_id = $vm.Index.cs_user.id;
                $.post(that.URL.node+'/setTimeout',obj,function(res){
                    console.log(res);
                    that.setMsgLoad = false;
                    if(res.status == 1){
                        that.setMsg = false;
                        obj = res.arr;
                    }
                });
          }
      }
  };
</script>
<style lang="less">
    .mainsss{
        top:0;left:0;position:fixed;width:100%;height:100%;z-index: 999;transform: translateX(-100%);opacity: 0;transition:all 0.3s; background:#fff;padding-top: 40px;
        &.open{
            transform: translateX(0);opacity: 1;
        }
        .content{
            height:calc(100% - 86px);overflow: hidden; overflow-y: auto;
            .van-notice-bar{
                padding:5px 15px;
            }
            .title{
                margin:0;font-size: 14px;color:#666;padding:10px;
            }
            .text{
                display: block;width:calc(94% - 20px);margin:0 3%;padding:0;height:130px;border:1px solid #cdcdcd;border-radius: 5px;outline: none;font-size: 14px;padding:10px;
                color:#666;
            }
            .imgbox{
                width:100px;height:100px;border:2px solid #cdcdcd;margin:0 15px;border-radius: 5px;text-align:center;display: inline-block; font-size: 0px;
                .icon{
                    font-size: 30px;line-height: 96px;
                }
                img{
                    width:100%;height:100%;
                }
            }
            .tjbtn{
                margin:10px;width:calc(100% - 20px);height:40px;line-height: 40px;
            }
        }
        .addmsg{
            padding:10px;width:70%;
            .title{
                margin:0;text-align: center;margin-bottom: 10px;color:#444;       
            }
            .button{
                height:30px;line-height: 30px;font-size: 14px;margin-top: 10px;
            }
        }
    }
</style>